<template>
  <div class="body">
      <div class="box">
        <el-form :model="editForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="100px" class="content" >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="editForm.password" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="editForm.address"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="editForm.tel"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserInfo" size="medium">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div> 
</template>

<script>
export default {
    data() {
      var checkMobile = (rule, value, cb) =>{
            let regMobile = /^(0|86|17951)?(1[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
                if (regMobile.test(value)) {
                return cb()
                }else{
                cb(new Error('手机号码格式不正确'))
                }

            }
      return {
        username: '',
        editForm: {},
        addFromRules: {
                    username:[
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                        { min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
                    ],
                    tel: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        { validator: checkMobile, trigger: 'blur' }
                    ]
        }
      }
    },
    created() {
      this.username = window.sessionStorage.getItem('username')
      this.showEditDialog(this.username)
    },
    methods: {
      async showEditDialog(username){
        const {data: res} = await this.$http.get('http://127.0.0.1:8181/user/findUser/' + username)
        this.editForm = res[0]
      },
      editUserInfo(){
            this.$refs.addFromRef.validate(async valid => {
                if (valid) {
                      const res = await this.$http.put('http://127.0.0.1:8181/user/update', this.editForm)
                      if (res.data == 'success') {
                          this.showEditDialog(this.username)
                          return this.$message.success('修改用户成功！')
                      }
                      return this.$message.error('用户修改失败！') 
                }
            })
      }
    }
  }
</script>

<style scoped>
.body{
        margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 80vh;
				background: url(../../assets/images/bj.jpg) no-repeat;
        background-size: 1128px 500px;
				font-family: 'Poppins', sans-serif;
}
.box{
  position: relative;
				width: 400px;
				padding: 40px 40px 40px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(0, 0, 0, .3);
        box-sizing: border-box;
}

/* .box::before,.box::after{
  background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4);
} */
.content{
  
  box-sizing: border-box;
  color: #fff;
}
.el-form-item__label{
  color: #000;
}
</style>